

        <!-- help-data -->


    
    <div class="detailHandle"><div class="detailCollapsed"></div><a name='gaugeArea'><code class="symbol">gaugeArea</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The gauge area configuration options.
This is the entire visible area of the gauge.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">Object</span><span class="defaultValue">(default: "white")</span></div><div class="detailBody"><div class="desc"> The background of the gauge area.
Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the gauge area.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc">
The color of the border. Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc">
The dash type of the border.
<div class="details-list">
    <dl>
        <dt>
             <code>"solid"</code>
        </dt>
        <dd>
             Specifies a solid line.
        </dd>
        <dt>
             <code>"dot"</code>
        </dt>
        <dd>
             Specifies a line consisting of dots.
        </dd>
        <dt>
             <code>"dash"</code>
        </dt>
        <dd>
             Specifies a line consisting of dashes.
        </dd>
        <dt>
             <code>"longDash"</code>
        </dt>
        <dd>
             Specifies a line consisting of a repeating pattern of long-dash.
        </dd>
        <dt>
             <code>"dashDot"</code>
        </dt>
        <dd>
             Specifies a line consisting of a repeating pattern of dash-dot.
        </dd>
        <dt>
             <code>"longDashDot"</code>
        </dt>
        <dd>
             Specifies a line consisting of a repeating pattern of long-dash-dot.
        </dd>
        <dt>
             <code>"longDashDotDot"</code>
        </dt>
        <dd>
             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
        </dd>
   </dl>
</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='height'><code class="symbol">height</code></a>: <span class="type">Number</span><span class="defaultValue">(default: vertical gauge is 200px; horizontal gauge is 60px)</span></div><div class="detailBody"><div class="desc">
The height of the gauge area.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 5)</span></div><div class="detailBody"><div class="desc"> The margin of the gauge area.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 5px (by default)
margin: { top: 1, left: 1 }</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: vertical gauge is 60px; horizontal gauge is 200px)</span></div><div class="detailBody"><div class="desc">
The width of the gauge area.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='pointer'><code class="symbol">pointer</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The pointer configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='cap'><code class="symbol">cap</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The cap configuration options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The color of the cap.
Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='size'><code class="symbol">size</code></a>: <span class="type">Number</span></div><div class="detailBody"><div class="desc">The size of the cap in percents. (from 0 to 1)</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The color of the pointer.
Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='value'><code class="symbol">value</code></a>: <span class="type">Number</span></div><div class="detailBody"><div class="desc">The value of the gauge.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='scale'><code class="symbol">scale</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the scale.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='endAngle'><code class="symbol">endAngle</code></a>: <span class="type">number</span><span class="defaultValue">(default: 210)</span></div><div class="detailBody"><div class="desc"> The end angle of the gauge.
The gauge is rendered clockwise(0 degrees are the 180 degrees in the polar coordinat system)</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='labels'><code class="symbol">labels</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the scale labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='background'><code class="symbol">background</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The background color of the labels.
Any valid CSS color string will work here, including hex and rgb</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='border'><code class="symbol">border</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The border of the labels.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span><span class="defaultValue">(default: "black")</span></div><div class="detailBody"><div class="desc">
The color of the border. Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dashType'><code class="symbol">dashType</code></a>: <span class="type">String</span><span class="defaultValue">(default: "solid")</span></div><div class="detailBody"><div class="desc">
The dash type of the border.
<div class="details-list">
    <dl>
        <dt>
             <code>"solid"</code>
        </dt>
        <dd>
             Specifies a solid line.
        </dd>
        <dt>
             <code>"dot"</code>
        </dt>
        <dd>
             Specifies a line consisting of dots.
        </dd>
        <dt>
             <code>"dash"</code>
        </dt>
        <dd>
             Specifies a line consisting of dashes.
        </dd>
        <dt>
             <code>"longDash"</code>
        </dt>
        <dd>
             Specifies a line consisting of a repeating pattern of long-dash.
        </dd>
        <dt>
             <code>"dashDot"</code>
        </dt>
        <dd>
             Specifies a line consisting of a repeating pattern of dash-dot.
        </dd>
        <dt>
             <code>"longDashDot"</code>
        </dt>
        <dd>
             Specifies a line consisting of a repeating pattern of long-dash-dot.
        </dd>
        <dt>
             <code>"longDashDotDot"</code>
        </dt>
        <dd>
             Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
        </dd>
   </dl>
</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The width of the border.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text color of the labels.
Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='font'><code class="symbol">font</code></a>: <span class="type">String</span><span class="defaultValue">(default: "12px Arial,Helvetica,sans-serif")</span></div><div class="detailBody"><div class="desc">
The font style of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The format of the labels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#radial-gauge").kendoRadialGauge({
    scale: {
       labels: {
           // set the format to currency
           format: "{0:C}"
       }
    }
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='margin'><code class="symbol">margin</code></a>: <span class="type">Number|Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The margin of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='padding'><code class="symbol">padding</code></a>: <span class="type">Number | Object</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The padding of the labels.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String/Function</span></div><div class="detailBody"><div class="desc">The label template.
Template variables:
<ul>
    <li><strong>value</strong> - the value</li>
</ul></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// chart intialization
$("#radial-gauge").kendoRadialGauge({
     scale: {
         labels: {
             // labels template
             template: "#= value #%"
         }
     }
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the labels.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='majorTicks'><code class="symbol">majorTicks</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the scale major ticks.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The color of the major ticks.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='size'><code class="symbol">size</code></a>: <span class="type">Number</span></div><div class="detailBody"><div class="desc">The major tick size.
This is the length of the line in pixels that is drawn to indicate the tick on the scale.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the major ticks.
Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0.5)</span></div><div class="detailBody"><div class="desc"> The width of the major ticks.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='majorUnit'><code class="symbol">majorUnit</code></a>: <span class="type">Number</span></div><div class="detailBody"><div class="desc">The interval between major divisions.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='max'><code class="symbol">max</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 100)</span></div><div class="detailBody"><div class="desc"> The maximum value of the scale.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='min'><code class="symbol">min</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> The minimum value of the scale.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='minorTicks'><code class="symbol">minorTicks</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Configures the scale minor ticks.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='color'><code class="symbol">color</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The color of the minor ticks.
Any valid CSS color string will work here, including hex and rgb.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='size'><code class="symbol">size</code></a>: <span class="type">Number</span></div><div class="detailBody"><div class="desc">The minor tick size.
This is the length of the line in pixels that is drawn to indicate the tick on the scale.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='visible'><code class="symbol">visible</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> The visibility of the minor ticks.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0.5)</span></div><div class="detailBody"><div class="desc"> The width of the minor ticks.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='minorUnit'><code class="symbol">minorUnit</code></a>: <span class="type">Number</span></div><div class="detailBody"><div class="desc">The interval between minor divisions.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='ranges'><code class="symbol">ranges</code></a>: <span class="type">Array</span></div><div class="detailBody"><div class="desc">The ranges of the scale.
The range fields:
<div class="details-list">
   <dl>
        <dt>
             <code>"from"</code>
        </dt>
        <dd>
             The start position of the range in scale units.
        </dd>
        <dt>
            <code>"to"</code>
        </dt>
        <dd>
             The end position of the range in scale units.
        </dd>
        <dt>
             <code>"color"</code>
        </dt>
        <dd>
             The color of the range.
Any valid CSS color string will work here, including hex and rgb.
        </dd>
   </dl>
</div></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#radial-gauge").kendoRadialGauge({
    scale: {
        ranges: [{
            from: 10,
            to: 20,
            color: "green"
        }]
    }
 });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='reverse'><code class="symbol">reverse</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc">
Reverses the scale direction - values are increase anticlockwise.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='startAngle'><code class="symbol">startAngle</code></a>: <span class="type">number</span><span class="defaultValue">(default: -30)</span></div><div class="detailBody"><div class="desc"> The start angle of the gauge.
The gauge is rendered clockwise(0 degrees are the 180 degrees in the polar coordinat system)</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='transitions'><code class="symbol">transitions</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc">
A value indicating if transition animations should be played.</div></div>

